<template>
  <view class="">
    <u-popup v-model="show" mode="right" width="70%">
    	<view>
    		<view class="flex flex-column" style="padding: 100rpx 20rpx;">
    			<text class="u-font-26 font-weight-bold u-p-y-20">商品分类</text>
    			<view class="flex flex-wrap" style="width: 100%;">
             <view @click="checkboxGroupChange(index)" class="u-m-b-10 u-m-r-10" v-for="(item,index) in list" :key="index">
               <u-tag :text="item.name" mode="light" type="info" shape="circle" :bg-color="item.checked?'var(--mainColor)':''"
               :color="item.checked?'#fff':''" border-color="#fff"></u-tag>
             </view>
            <!-- <u-checkbox-group @change="checkboxGroupChange">
              <block v-for="(item,index) in list" :key="index">
                <u-checkbox v-model="item.checked" :name="item.id">
                  <view class="u-m-b-20">
                    <u-tag :text="item.name" mode="plain" 
                    :color="item.checked?'var(--mainColor)':''"></u-tag>
                  </view>
                </u-checkbox>
              </block>
            </u-checkbox-group> -->
          </view>
    		</view>
    		<view class="position-fixed bottom-0 left-0 right-0 safe-bottom" style="border-top:2rpx solid #f5f5f5;">
    			<view class="flex align-center justify-between">
            <view class="flex-1 text-center" @click="show = false">
              关闭
            </view>
            <view style="height:90rpx;width:2rpx;background-color:#f5f5f5;"></view>
            <view class="flex-1 text-center" style="color: var(--mainColor);" @click="sure">
              确认
            </view>
    			</view>
    		</view>
    	</view>
    
    </u-popup>
  </view>
</template>

<script>
  export default {
    name: "supplier-popup",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        show: false,
        idList: []
      }
    },
    methods: {
      open() {
        this.show = true
      },
      checkboxGroupChange(index) {
        this.$emit('checkboxGroupChange',index)
        // console.log(e);
        // this.idList = e
      },
      sure() {
        this.show = false
        let Ids = []
        this.list.forEach(item => {
          if(item.checked == true)Ids.push(item.id)
        });
        console.log(Ids,"list");
        this.$emit('choice',Ids)
      }
    }
  }
</script>

<style scoped lang="scss">

  ::v-deep .u-checkbox__icon-wrap[data-v-54acf820] {
    display:  none;
  }
</style>
